<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style type="text/css">
		canvas{
/*			display: none;*/
			margin-left: 25px;
			margin-top: 20px;
		}
		#shade{
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			z-index: 999;
			background-color: rgba(225,225,225,.6);
		}
		#shade .load{
			width: 50px;
			height: 50px;
			position: fixed;
			left: 50%;
			top: 50%;
			z-index: 1000;
			border-radius: 50%;
			border:1px solid #ccc;
			border-width: 3px;
			border-left-color:red; 
			border-right-color:green; 
			border-top-color:yellow; 
			border-bottom-color:blue; 			
			margin-left: -25px;
			margin-top: -25px;
			animation:rotate 0.8s linear infinite;
			-moz-animation:rotate 0.8s linear infinite; /* Firefox */
			-webkit-animation:rotate 0.8s linear infinite; /* Safari and Chrome */
			-o-animation:rotate 0.8s linear infinite; /* Opera */
		}
		@keyframes  rotate{
			form{
				transform: rotate(0deg);
			}
			to{
				transform: rotate(360deg);
			}
		}
	</style>
	 <div id="qrcode" class="hidden qr_area"> </div>
	 <div id="shade">
	 	<div class="load"></div>
	 </div>
	 <button onclick="download()">下载</button>
	 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="https://files.cnblogs.com/files/kitty-blog/jquery.qrcode.min.js"></script>
	<script type="text/javascript" src="https://files.cnblogs.com/files/kitty-blog/FileSaver.js"></script>
	<script type="text/javascript" src="https://files.cnblogs.com/files/kitty-blog/jszip.min.js"></script>
	<script type="text/javascript">
	/*qrcodeUrl--二维码地址
		logoUrl--中间图片
		text--底部标注文字
		pathName--文件保存后缀名*/
		;$(function(){
				getQrcodeList({
					qrcodeUrl:"https://www.baidu.com/",
					logoUrl:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=503507682,1833386961&fm=26&gp=0.jpg",	
					n:8,
					pathName:"你好",
					text:"我是标注文字"
				})			
		});	
		function getQrcodeList(data){
		 	var qrcodeUrl=data.qrcodeUrl,
		 		logoUrl=data.logoUrl||false, 		
		 		text=data.text||false,
		 		len=data.n||1,
		 		pathName=data.pathName||"sleep";	
			var date=new Date(),t=date.getTime();				
			var zip = new JSZip();window.zip=zip; 				
			for(let i=0;i<len;i++){
				drawQrode({
					qrcodeUrl:qrcodeUrl,
					logoUrl:logoUrl,	
					text:text,
					index:i,
					pathName:pathName+i+".jpg"	
				})				
			}		 				
		}	
		/**下载二维码压缩包 */
		function download() {
		    //创建压缩包对象 jszip.js
		    //获取到所有已经生成好的二维码
		    var zip=window.zip;
		    var canvases = $("#qrcode").find('canvas');
		    // 下载压缩包
		    zip.generateAsync({ type: "blob" }).then(function (content) {
		        // see FileSaver.js
		        saveAs(content, "二维码.zip");
		    });
		};	
		//jquery-qrcode不支持中文,改变一下编码就支持了！
		function utf16to8(str) {
			var out, i, len, c;
			out = "";
			len = str.length;
			for (i = 0; i < len; i++) {
				c = str.charCodeAt(i);
				if ((c >= 0x0001) && (c <= 0x007F)) {
					out += str.charAt(i);
				} else if (c > 0x07FF) {
					out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
					out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
					out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
				} else {
					out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
					out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
				}
			}
			return out;
		};
	//绘制二维码
		 ;function drawQrode(data){
		 	var qrcodeUrl=data.qrcodeUrl,
		 		logoUrl=data.logoUrl, 		
		 		text=data.text,
		 		index=data.index,
		 		picName=data.pathName;
				//二维码宽高
				var zip=window.zip;
				var qrcodewidth = 200;
				var qrcodeheight = 200;
				//canvas宽高
				var canvaswidth = qrcodewidth;
				var canvasheight = qrcodeheight + 50;
				if(!text){
					canvasheight = qrcodeheight;
				}				
				//logo宽高
				var logowidth = 50;
				var logoheight = 50;
				//文字描述位置
				var textleft = qrcodewidth / 2;
				var texttop = qrcodeheight + 30;
				//logo位置
				var logoleft = (qrcodewidth - logowidth) / 2;
				var logotop = (qrcodeheight - logoheight) / 2;
		 
				var qrcode = $('#qrcode').qrcode({
					render : 'canvas',
					text : utf16to8(qrcodeUrl),
					width : qrcodewidth,
					height : qrcodeheight,
					background : '#ffffff',
					foreground : '#000000',
				});
				var len = $('#qrcode').find("canvas").length;
				    //给当前生成的canvas 添加data-picname 作为下载后的图片名称（.png类型图片）
				 	$($('#qrcode').find("canvas")[len - 1]).data().picname = picName;			
				var canvas = qrcode.find('canvas').get(index);
				var img = new Image();
					img.setAttribute("crossOrigin",'anonymous');
					img.src = canvas.toDataURL('image/png');
				img.onload = function() {
					// if(text&&text!=="undefined"&&typeof(text)!="undefined"){
						canvas.width = canvaswidth;
						canvas.height = canvasheight;
						var ctx = canvas.getContext('2d');
						//设置画布背景
						ctx.fillStyle = '#ffffff';
						ctx.fillRect(0, 0, canvas.width, canvas.height);
						//设置文字样式
						ctx.fillStyle = '#000000';
						ctx.font = 'bold ' + 20 + 'px Arial';
						ctx.textAlign = 'center';
						//文字描述
						ctx.fillText(text, textleft, texttop);
						//绘制二维码
						ctx.drawImage(img, 0, 0);
					// }
					//设置logo
					if(logoUrl!=='undefined'&&typeof(logoUrl)!=="undefined"&&logoUrl){
						var logo = new Image(logowidth, logoheight);
							logo.setAttribute("crossOrigin",'anonymous');
						logo.src = logoUrl;
						logo.onload = function() {
							ctx.drawImage(logo, logoleft, logotop, logowidth, logoheight);
					        var imgData = canvas.toDataURL('image/png').split('base64,')[1];		        
					        var picName = $(canvas).data().picname;
					        zip.file(picName, imgData, { base64: true });
					        $('#shade').hide();				
						}
					}else{
						if(!logoUrl){
							$('#shade').hide();
						}						
					}

				}	
		 };				
	</script>
</body>
</html>